<template>
  <div class="contract-termination-passed-page">
    <div class="wrap">
      <!-- 顶部步骤条 -->
      <StepBar :steps="steps" :current-step="2" />

      <!-- 处理结果卡片 -->
      <div class="result-card">
        <div class="result-header">
          <el-icon color="#f56c6c" style="margin-right: 8px; font-size: 18px;">
            <WarningFilled />
          </el-icon>
          <span class="result-title">处理结果</span>
        </div>

        <div class="processing-content">
          <div class="processing-icon">
            <el-icon :size="80" color="#909399">
              <WarningFilled />
            </el-icon>
          </div>
          <div class="processing-title">处理中</div>
          <div class="processing-desc">
            抱歉，解除合同正在处理中，无法查询单据所针的问涌本望，调依后（处理回返）！
          </div>

          <!-- 操作记录 -->
          <div class="operation-record">
            <div class="record-title">操作记录</div>
            <div class="timeline">
              <div class="timeline-item">
                <div class="timeline-icon success">✓</div>
                <div class="timeline-content">
                  <div class="timeline-header">
                    <div class="timeline-title">发起申请-申请退住</div>
                    <div class="timeline-date">2048-10-15 09:00:00</div>
                  </div>
                  <div class="timeline-user">
                    顾廷烨
                    <el-tag size="small" type="success">已发起</el-tag>
                  </div>
                </div>
              </div>
              <div class="timeline-item">
                <div class="timeline-icon processing">⏱</div>
                <div class="timeline-content">
                  <div class="timeline-header">
                    <div class="timeline-title">(待处理) 审批-申请审批</div>
                  </div>
                  <div class="timeline-user">
                    退住审批员
                    <el-tag size="small" type="info">审批中</el-tag>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部操作按钮 -->
      <div class="bottom-actions">
        <el-button @click="handleBack">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { WarningFilled } from '@element-plus/icons-vue'
import StepBar from '@/components/StepBar/index.vue'

const router = useRouter()

// 步骤条数据
const steps = ['申请退住', '申请审批', '解除合同', '调整账单', '账单审批', '退住审批', '费用清算']

// 返回
const handleBack = () => {
  router.back()
}
</script>

<style scoped lang="scss">
.contract-termination-passed-page {
  min-height: 100%;
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 50%, #fffde7 100%);
  padding: 20px;
  position: relative;
  overflow: hidden;

  // 装饰性背景元素
  &::before,
  &::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: 0.3;
    pointer-events: none;
  }

  &::before {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(205, 220, 57, 0.3) 0%, transparent 70%);
    top: 100px;
    left: 10%;
  }

  &::after {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(139, 195, 74, 0.25) 0%, transparent 70%);
    top: 200px;
    right: 15%;
  }
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* 结果卡片 */
.result-card {
  background: white;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
  overflow: hidden;
}

.result-header {
  background: #fef0f0;
  border-bottom: 1px solid #fde2e2;
  padding: 15px 30px;
  display: flex;
  align-items: center;

  .result-title {
    font-size: 16px;
    font-weight: bold;
    color: #f56c6c;
  }
}

/* 处理中内容 */
.processing-content {
  padding: 60px 40px;
  text-align: center;
}

.processing-icon {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;

  .el-icon {
    animation: pulse 2s ease-in-out infinite;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.processing-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.processing-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 40px;
}

/* 操作记录 */
.operation-record {
  max-width: 600px;
  margin: 0 auto;
  background: #f5f7fa;
  border-radius: 8px;
  padding: 25px;
  text-align: left;
}

.record-title {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

/* 时间轴样式 */
.timeline {
  .timeline-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    position: relative;

    &:last-child {
      margin-bottom: 0;
    }

    &:not(:last-child)::after {
      content: '';
      position: absolute;
      left: 21px;
      top: 45px;
      bottom: -25px;
      width: 2px;
      background: #dcdfe6;
    }
  }

  .timeline-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    flex-shrink: 0;

    &.success {
      background: #67c23a;
    }

    &.processing {
      background: #409eff;
    }
  }

  .timeline-content {
    flex: 1;
    padding-top: 2px;
  }

  .timeline-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    align-items: center;
  }

  .timeline-title {
    font-size: 14px;
    color: #333;
    font-weight: 500;
  }

  .timeline-date {
    font-size: 12px;
    color: #909399;
    white-space: nowrap;
  }

  .timeline-user {
    font-size: 13px;
    color: #606266;
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

/* 底部按钮 */
.bottom-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 30px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
</style>

